<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue动画</title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			.content{
				width: 200px;
				height: 50px;
				background-color: aqua;
				line-height: 50px;
				text-align: center;
			}
			@keyframes move {
				20%{
					transform: translateX(-20px);
				}
				40%{
					transform: translateX(20px);
				}
				60%{
					transform: translateX(-20px);
				}
				80%{
					transform: translateX(20px);
				}
				100%{
					transform: translateX(0px);
				}
				
			}
			.animate{
				animation: move 0.8s linear;
			}
		</style>
	</head>
	<body>
		<!-- <div id="app">
			<div class="content" :class="className" @animationend="className.animate=false" :style="style">我是第一个动画</div>
			<div class="but_box">
				<!-- 传递事件对象 -->
				<!-- <button @click="startMove($event)">切换动画1</button>
				<button @click="startMove($event)">切换动画2</button>
				<button @click="startMove($event)">切换动画3</button>
			</div>
		</div> --> -->
	<!-- 	<div id="app"> -->
			  <!-- <div ref="firstDiv" class="content" :class="className" @animationend="className.animate=false" :style="style">我是第一个动画</div>
			   <div ref="secondDiv" class="content" :class="className" @animationend="className.animate=false" :style="style">我是第二个动画</div>
					   
					   <transition>
						   <div v-if="isShow" class="content">我是第三个动画</div>
					   </transition> -->
					   
					       <!--  进入退出的生命周期函数 -->
						  <!-- <transition name="four" @after-enter="life('before-enter')" @enter="life('enter')" @after-enter="life('after-enter')"
						   @before-leave="life('before-leave')" @leave="life('leave')" @after-leave="life('after-leave')">
						   <div  v-if="isShow" class="content">我是第四个动画</div>
							   
						   </transition> -->
						   
						  <!-- 禁用css动画  :css="false"  -->
						  <transition :css="false" @enter="life">
						   		<div v-if="isShow" class="content">我是第五个动画</div>
						   </transition> 
						   
						   <div class="but_box">
							    <!-- 传递事件对象 -->
								<button @click="startMove($event)">切换动画1</button>
						   </div>
						   <abc ref="abc"></abc>
		</div>
	</body>
	       
</html>
<script>
	 const app = Vue.createApp({
		 data(){
			 return{
				 isShow:false,
				 className:{'animate':false,transition:true},
				 style:{
					 'backgroundColor':'bisque'
				 }
			 }
		 },
		 methods:{
			 startMove(e){
				 const rect = e.target.getBoundingClientRect()
				
				 console.log(rect);
				 //获取所有的dom指向
				 this.className.animate = true;
				 if( this.style.backgroundColor == 'aqua'){
					 this.style.backgroundColor = 'pink'
				 }else{
					 this.style.backgroundColor = 'aqua'
				 }
				 
			 }
			   life(el,done){
				   
			   }
			 
		 }
	 })
	      app.component('abc',{
			  data(){
				  return{
					  count:22
				  }
			  },
			  mothods:{
				  fun(){
					  
				  }
			  }
		  })
	 const vm = app.mount("#app")
</script>